<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.mobile" class="search-input" clearable placeholder="请输入手机号"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.name" class="search-input" clearable placeholder="请输入姓名"/>
                </FormItem>
                <FormItem>
                    <Select v-model="searchObj.sex" placeholder="请选择性别" clearable filterable style="width: 200px">
                        <Option value="0">男</Option>
                        <Option value="1">女</Option>
                        <Option value="2">未知</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="warning" @click="addAction">
                        <Icon type="ios-add"/>
                        添加
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-table
                    ref="xTable"
                    border
                    resizable
                    highlight-hover-row
                    size="medium"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData">
                <vxe-table-column type="seq" title="编号" width="60"></vxe-table-column>
                <vxe-table-column field="mobile" title="手机号" min-width="120"></vxe-table-column>
                <vxe-table-column field="name" title="姓名" min-width="120"></vxe-table-column>
                <vxe-table-column field="sex" title="性别" min-width="120">
                    <template v-slot="{row}">
                        <span v-if="row.sex == '0'">男</span>
                        <span v-if="row.sex == '1'">女</span>
                        <span v-if="row.sex == '2'">未知</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="createDate" title="创建时间" min-width="120"></vxe-table-column>
                <vxe-table-column field="action" title="操作" width="200">
                    <template v-slot="{row}">
                        <ButtonGroup class="action-btn">
                            <Button type="success" size="small" @click="editAction(row)">
                                <Icon type="ios-create-outline"/>
                                修改
                            </Button>
                            <Button type="error" size="small" @click="delBtn(row.id)">
                                <Icon type="md-close"/>
                                删除
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                  :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,100]" @on-page-size-change="pageSizeChange"/>
        </Row>
        <option-modal :modalShow="modalShow" :modalType="modalType" :modalTitle="modalTitle" :dataObj="modalData"
                      @cancel="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import { memberInfoServiceFindList, memberInfoServiceDelete } from '@/api/shop'
import OptionModal from './components/option-modal'
export default {
  components: { OptionModal },
  data () {
    return {
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalData: {},
      tableLoading: false,
      tableData: []
    }
  },
  methods: {
    init () {
      this.tableLoading = true
      let param = {
        name: this.$common.xeUtils.trim(this.searchObj.name),
        mobile: this.$common.xeUtils.trim(this.searchObj.mobile),
        sex: this.searchObj.sex,
        type: 1,
        source_from: 0,
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      memberInfoServiceFindList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = ret.data.data.result
          this.tableData.forEach((item) => {
            item.createDate = this.$common.xeUtils.toDateString(item.createDate)
          })
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    addAction () {
      this.modalType = 'add'
      this.modalTitle = '添加客户信息'
      this.modalData = {}
      this.modalShow = true
    },
    editAction (row) {
      this.modalType = 'edit'
      this.modalTitle = '修改客户信息'
      this.modalShow = true
      row.birthday = this.$common.xeUtils.toDateString(row.birthday, 'yyyy-MM-dd')
      this.modalData = row
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    cancelOption () {
      this.modalType = 'add'
      this.modalShow = false
    },
    delOne (val) {
      memberInfoServiceDelete({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    delBtn (val) {
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.delOne(val)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageObj.pageSize = pageSize
      this.init()
    },
    searchAction () {
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '添加成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    /deep/ .ivu-btn-group:not(.ivu-btn-group-vertical)>.ivu-btn:first-child:not(:last-child){
        margin-right: 10px;
        font-size: 12px;
    }
    /deep/ .ivu-btn-group:not(.ivu-btn-group-vertical)>.ivu-btn:last-child:not(:first-child){
        font-size: 12px;
    }
</style>
